<template>
    <div class="progressBar">
        <span :style="{width}"></span>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{
        width:{
            type:String,
            default:0
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .progressBar{
        position: relative;
        z-index: 10;
        height: 5px;
        width: 100%;
        background: rgba(103,248,255,0.2);
        span{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
            height: 100%;
            width:0;
            background: #67F8FF;
            transition: width 1s;
            -webkit-transition: width 1s; 
        }
    }
</style>